<template>
    <div>
        <!-- 大容器 -->
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <Ip>
                    //插入槽口
                    <template #main> <ItemOne></ItemOne> </template>
                </Ip>
                <Ip>
                    //插入槽口
                    <template #main> <ItemTwo></ItemTwo> </template>
                </Ip>
            </section>
            <!-- 右容器 -->
            <section class="itemRight">
                <Ip>
                    //插入槽口
                    <template #main> <ItemThree></ItemThree> </template>
                </Ip>
                <Ip>
                    //插入槽口
                    <template #main> <ItemFour></ItemFour> </template>
                </Ip>
            </section>
        </section>
    </div>
</template>

<script setup lang="ts">
import Ip from '../../components/ItemPage.vue'
//左右四个小插件
import ItemOne from '../../components/ItemOne.vue'
import ItemTwo from '../../components/ItemTwo.vue'
import ItemThree from '../../components/ItemThree.vue'
import ItemFour from '../../components/ItemFour.vue'


</script>

<style scoped lang="scss">
.container {
    width: 100%;
    margin: 0 auto;
    background-color: gray;
    display: flex;

    .itemLeft,
    .itemRight{
        flex: 1;
    }

}
</style>